<template>
	<!-- 上面操作 -->
	<el-row :gutter="20" class="g-nav">
		<el-col :span="12">
			<el-button-group size="small">
				<el-button type="warning" :icon="ArrowLeft"> 返回</el-button>
				<el-button type="warning" @click="onAddMenu">
					<el-icon><Plus /></el-icon> 新增根菜单
				</el-button>
				<el-button type="warning" @click="onDeleteRootMenu">
					<el-icon><Delete /></el-icon> 删除
				</el-button>
				<el-button type="warning" @click="onRefreshMenu">
					<el-icon><Refresh /></el-icon> 刷新
				</el-button>
			</el-button-group>
		</el-col>
	</el-row>

	<el-row :gutter="20">
		<!-- 左边菜单树 -->
		<el-col :span="4" class="menu-tree">
			<el-tree
				default-expand-all
				ref="menuTreeRef"
				:data="menuTree"
				node-key="id"
				:props="defaultProps"
				highlight-current="true"
				:expand-on-click-node="false"
				@node-click="onNodeClick"
			></el-tree>
		</el-col>
		<!-- 右边菜单表格 -->
		<el-col :span="20">
			<el-table stripe border :data="submenu" style="width: 100%; text-align: center">
				<el-table-column prop="id" label="ID" width="180"></el-table-column>

				<el-table-column prop="label" label="菜单名" />
				<el-table-column prop="path" label="路径" />
				<el-table-column prop="sort" label="排序" />
				<el-table-column prop="icon" label="图标" />
				<el-table-column label="操作" width="280">
					<template #default="scope">
						<el-button size="small" @click="onEditMenu(scope.row)">
							<el-icon class="el-icon--right"><Edit /></el-icon> 编辑
						</el-button>
						<el-popconfirm
							title="确认删除吗？"
							confirm-button-text="确认"
							cancel-button-text="取消"
							@confirm="onDeleteMenu(scope.row.id)"
						>
							<template #reference>
								<el-button size="small" type="danger"
									><el-icon class="el-icon--right"><Delete /></el-icon> 删除</el-button
								>
							</template>
						</el-popconfirm>
						<el-button size="small" @click="onOpenResource(scope.row.id)"> 资源管理 </el-button>
					</template>
				</el-table-column>
			</el-table>
		</el-col>
	</el-row>
	<el-dialog :title="type===FormType.ADD?'添加子菜单':'编辑子菜单'" v-model="disableMenuDialog">
		<MenuDialog v-if="disableMenuDialog" v-model="disableMenuDialog" :type="type" :currentMenu="currentMenu" @close="onClose" :parentId="parentId"></MenuDialog>
	</el-dialog>

	<el-dialog title="资源管理" v-model="disableResourceDialog">
		<ResourceDialog
			v-if="disableResourceDialog"
			v-model="disableResourceDialog"
			@close="onResourceClose"
			:menuId="menuId"
		></ResourceDialog>
	</el-dialog>
</template>

<script setup>
import MenuDialog from '@/components/MenuDialog.vue'
import ResourceDialog from '@/components/ResourceDialog.vue'
import { ArrowLeft, Delete, Edit, Plus, Refresh } from '@element-plus/icons-vue'
import { useTreeMenu } from '@/hooks/menu'
import { useResource } from '@/hooks/resource'
import { ElMessage } from 'element-plus'
import { FormType } from '@/config/const'

const { disableResourceDialog, menuId, onResourceClose, onOpenResource } = useResource()
const {
	parentId,
	menuTree,
	defaultProps,
	currentMenu,
	disableMenuDialog,
	type,
	submenu,
	onNodeClick,
	onAddMenu,
	getMenuList,
	onDeleteMenu,
	onDeleteRootMenu,
	onRefreshMenu,
	onEditMenu,
} = useTreeMenu()

//对话框
const onClose = () => {
	getMenuList()
}

</script>

<style lang="scss" scoped>
.g-nav {
	margin-bottom: 10px;
}
.menu-tree {
	border: 1px solid rgb(240, 234, 234);
}
</style>
